<!DOCTYPE html>
<html>
    <head>
        <title>Point Cloud on globe</title>

        <style type="text/css">
            #info {
                color: black;
                position: absolute;
                top: 0;
                left: 0;
                margin-left: 15px;
                padding: 0.3rem;
                z-index: 100;
                background-color: white;
                border: 2px solid black;
                border-radius: 5px;
            }

            @media (max-width: 600px) {
                #info,
                .dg {
                    display: none;
                }
            }
        </style>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/loading_screen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv"></div>
        <div id="info"></div>
        <script src="js/GUI/dat.gui/dat.gui.min.js"></script>
        <script src="../dist/itowns.js"></script>
        <script src="js/loading_screen.js"></script>
        <script src="../dist/debug.js"></script>
        <script type="text/javascript">
            function showPointcloud(serverUrl, fileName) {
                var pointcloud;
                var oldPostUpdate;
                var viewerDiv;
                var debugGui;
                var view;
                var positionOnGlobe;

                viewerDiv = document.getElementById('viewerDiv');
                viewerDiv.style.display = 'block';

                debugGui = new dat.GUI();

                positionOnGlobe = { longitude: 4.631512, latitude: 43.675626, altitude: 250 };

                view = new itowns.GlobeView(viewerDiv, positionOnGlobe, { handleCollision: false });
                setupLoadingScreen(viewerDiv, view);

                view.controls.minDistance = 0;
                
                // Configure Point Cloud layer
                pointcloud = new itowns.GeometryLayer('eglise_saint_blaise_arles', view.scene);
                pointcloud.file = fileName || 'infos/sources';
                pointcloud.protocol = 'potreeconverter';
                pointcloud.url = serverUrl;

                // add pointcloud to scene
                function onLayerReady() {
                    debug.PointCloudDebug.initTools(view, pointcloud, debugGui);

                    // update stats window
                    oldPostUpdate = pointcloud.postUpdate;
                    pointcloud.postUpdate = function postUpdate() {
                        var info = document.getElementById('info');
                        oldPostUpdate.apply(pointcloud, arguments);
                        info.textContent = 'Nb points: ' +
                            pointcloud.displayedCount.toLocaleString();
                    };
                }
                window.view = view;

                itowns.View.prototype.addLayer.call(view, pointcloud).then(onLayerReady);

                itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(function _(config) {
                    config.source = new itowns.WMTSSource(config.source);
                    var layer = new itowns.ElevationLayer(config.id, config);
                    view.addLayer(layer);
                });
                itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                    config.source = new itowns.WMTSSource(config.source);
                    var layer = new itowns.ColorLayer(config.id, config);
                    view.addLayer(layer);
                });
            }

            showPointcloud("https://raw.githubusercontent.com/gmaillet/dataset/master/", "eglise_saint_blaise_arles.js");
        </script>
    </body>
</html>

